import { Component } from '@/decorators';
import { Vue } from 'vue-class-component';
import { Form, Field, Button, showToast } from 'vant';
import request from '@/utils/request';
import { useStore } from '@/store';
import { Debounce } from '@/decorators';

@Component({
  name: 'Verify',
  render() {
    return (
      <div class="p-4">
        <h1 class="text-2xl font-bold mb-6 text-center">实名认证</h1>
        <Form onSubmit={this.onSubmit}>
          <Field
            v-model={this.form.realName}
            label="真实姓名"
            placeholder="请填写真实姓名"
            rules={[{ required: true, message: '请填写真实姓名' }]}
          />
          <Field
            v-model={this.form.idCard}
            label="身份证号"
            placeholder="请填写身份证号"
            rules={[
              { required: true, message: '请填写身份证号' },
              { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号' }
            ]}
          />
          <div class="mt-8">
            <Button round block type="primary" native-type="submit">
              提交认证
            </Button>
          </div>
        </Form>
      </div>
    );
  }
})
export default class Verify extends Vue {
  private form = {
    realName: '',
    idCard: ''
  };

  @Debounce(300)
  private async onSubmit() {
    try {
      await request.post('/user/verify', this.form);
      showToast({ type: 'success', message: '认证成功' });
      await useStore().getUserInfo();
      this.$router.back();
    } catch (error) {
      // 错误已在拦截器中处理
    }
  }
}